<template>
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <BoxCardOne  />
        <BoxCardFirst   />
    </div>
    <div >
      <div style="display: flex; justify-content: center;width: 6%;align-items: center;margin-left: 6rem; ">
           <img src="@/static/img/set/special.png" alt="" />
           <div style="margin-left: 1rem;font-size: 20px;color: rgba(255, 255, 255, 1);font-weight: 600;vertical-align: middle;">特殊游戏</div>
      </div>
  
      <div style="display: flex; justify-content: space-between;align-items: center !important; ">
       <BoxCardTwo />
       <BoxCardThree />
      </div>
    </div>
    
       <div style="display: flex; justify-content: center; width: 6%;align-items: center;margin-left: 6rem; ">
            <img src="@/static/img/set/hacker.png" alt="" />
             <div style="margin-left: 1rem;font-size: 20px;color: rgba(255, 255, 255, 1);font-weight: 600;vertical-align: middle;">哈希游戏</div>
      </div>
  <v-container class="mt-10 d-flex justify-center" style="max-width: 1500px">
    <div
      v-if="boxListData"
      class="box-card"
      style="max-width: 90%; margin: 0 auto;display: flex; justify-content: space-between; align-items: center"
    >
     <!--      <div class="tip">-->
      <!--        <div class="tipBtn" @click="handleToHistory">-->
     <!--          掉落记录-->
     <!--        </div>-->
     <!--      </div>-->
      <v-row class="box-title mb-10" no-gutters>
        <v-col v-if="rechargeWelfareboxList.length > 0">
          <div class="list-title text-center d-flex align-center justify-center my-6">
            <span class="title-arrow-left"></span>
            <span class="title-text">每日充值福利箱</span>
            <span class="title-arrow-right"></span>
          </div>
          <div class="box-container">
            <v-row class="box-list" dense>
              <v-col
                v-for="item in rechargeWelfareboxList"
                :key="item.id"
                cols="6"
                md="2"
                sm="3"
              >
                <router-link :to="`/welfatebox/${item.id}/${item.box_id}`">
                  <div class="box-item">
                    <div class="img">
                      <img
                        :src="`${BASE_URL}/${item.box_img}`"
                      />
                    </div>

                    <div>
                      <p>{{ item.box_name }}</p>
                      <div class="price mt-1 text-center">
                        <img src="@/static/img/icon/coin.png" />
                        <span>0</span>
                      </div>
                      <!-- <div class="price mt-1">
                        <span>{{ item.price }}</span> 硬币
                      </div> -->
                    </div>
                  </div>
                </router-link>
              </v-col>
            </v-row>
          </div>
        </v-col>
        <v-col
          v-for="(list, i) in boxListData"
          cols="12"
          :key="i"
        >
          <div class="list-title text-center d-flex align-center justify-center my-6">
            <span class="title-arrow-left"></span>
            <span class="title-text">
              {{ list?.name }}
            </span>
            <span class="title-arrow-right"></span>
          </div>

          <div class="box-container">
            <v-row class="box-list" dense>
              <v-col
                v-for="item in list?.list"
                :key="item.id"
                cols="6"
                md="2"
                sm="3"
              >
                <router-link :to="`/casebox/${item.id}`">
                  <div class="box-item">
                    <div class="img">
                      <img
                        :src="`${BASE_URL}/${item.img}`"
                      />
                    </div>

                    <div>
                      <p>{{ item.name }}</p>
                      <div class="price mt-1 text-center">
                        <img src="@/static/img/icon/coin.png" />
                        <span>{{ item.price }}</span>
                      </div>
                      <!-- <div class="price mt-1">
                        <span>{{ item.price }}</span> 硬币
                      </div> -->
                    </div>
                  </div>
                </router-link>
              </v-col>
            </v-row>
          </div>
        </v-col>
      </v-row>
    </div>
  </v-container>
    <div>
       <BoxCardFour />
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, computed } from "vue";
import ActivityCard from "@/components/activity-card/Index.vue";
import ActivityNotice from "@/components/activity-notice/Index.vue";
import BoxCard from "@/components/box-card/Index.vue";
import { useStore } from "@/store";
import BoxCardOne from "@/views/csgo/BoxCardOne.vue";
import  BoxCardFirst from "@/views/csgo/BoxCardFirst.vue";
import  BoxCardTwo from "@/views/csgo/BoxCardTwo.vue";
import  BoxCardThree from "@/views/csgo/BoxFirstThree.vue";
import  BoxCardFour from "@/views/csgo/BoxCardFour.vue";

// import {activityList, boxList} from './data'
import BoxService from "@/services/BoxService";
import WelfareBoxService from "@/services/WelfareBoxService";
import _ from "lodash";
import {useRouter} from "vue-router";

export default defineComponent({
  name: "Csgo",
  components: {
    ActivityCard,
    ActivityNotice,
    BoxCard,
     BoxCardOne , BoxCardFirst,BoxCardTwo ,BoxCardThree, BoxCardFour
  },
  setup() {
    const router = useRouter();
    const store = useStore()
    store.dispatch("getRechargeWelfareBoxTypeId")
    
    const state = reactive({
      boxListData: [],
      recharge_welfare_box_type_id: computed(() => store.getters.rechargeWelfareBoxTypeId),
      rechargeWelfareboxList: [],
    });
    console.log('111',state)
    const getBoxList = async () => {
      const types = await getBoxAllType();

      const list: any[] = [];
      for(let i = 0; i < types.length; i++) {
        const item = types[i];
        if (item.id == state.recharge_welfare_box_type_id) {
          continue
        }
        const res = await BoxService.list({type_id: item.id, page: 1, page_size: 24});
        list.push({
          sort: item.sort,
          name: item.name,
          ...res.data.data,
        });
      };

      state.boxListData = _.sortBy(list, o => o.sort);
    };

    const getBoxAllType = async () => {
      const res = await BoxService.allType();
      return res.data.data;
    };

    onMounted(async() => {
      await getBoxList();
      await getRechargeWelfareBoxList();
    });

    async function getRechargeWelfareBoxList() {
      const resp = await WelfareBoxService.rechargeWelfareBoxList({
        disabled: 0,
        sorts: "+amount"
      })
      const { data: {list, total} } = resp.data
      console.log(list,'list')
      state.rechargeWelfareboxList = list
    }

    const currentChange = async (val) => {
      const res = await BoxService.list({
        page_size: state.page_size,
        page: val,
      });
      state.boxListData = res.data.data;
    };

    return {
      ...toRefs(state),
      currentChange,
      handleToHistory() {
        router.push("/csgo/history");
      },
    };
  },
});
</script>

<style lang="scss" scoped>

.box-card {
  .tip{
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: right;
    .tipBtn{
      cursor: pointer;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .list-title {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #c6c4d8;
    position: relative;
    .title-arrow-left {
      border-left: 4px solid #ff4700;
      display: inline-block;
      border-top: 2px solid transparent;
      border-bottom: 2px solid transparent;
      position: relative;

      &::before{
        left: -3px;
        content: "";
        position: absolute;
        box-sizing: border-box;
        box-shadow: 0 0 10px 2px rgb(255 71 0 / 90%);        
      }
      &::after{
        right: 4px;
        box-sizing: border-box;
        background: linear-gradient(270deg,#ff4700,rgba(227,66,5,0));
        content: "";
        position: absolute;
        top: -1px;
        width: 44px;
        height: 2px;
        opacity: .19;
      }
    }
    .title-text {
      min-height: 27px;
      margin: 0 20px;
      display: inline-block;
      position: relative;
      text-align: center;
    }
    .title-arrow-right {
      border-right: 4px solid #ff4700;
      display: inline-block;
      border-top: 2px solid transparent;
      border-bottom: 2px solid transparent;
      position: relative;
      box-sizing: border-box;

      &::before{
        left: 3px;
        content: "";
        position: absolute;
        box-shadow: 0 0 10px 2px rgb(255 71 0 / 90%);
        box-sizing: border-box;        
      }
      &::after{
        left: 4px;
        background: linear-gradient(90deg,#ff4700,rgba(227,66,5,0));
        content: "";
        position: absolute;
        top: -1px;
        width: 44px;
        height: 2px;
        opacity: .19;
        box-sizing: border-box;        
      }
    }
  }
  .box-container {
    .box-list {
      .box-item {
        cursor: pointer;
        height: 100%;
        padding: 1rem;
        font-size: 1rem;
        color: #afafaf;

        &:hover {
        .img {
          -webkit-transform:scale(1.1);
          transform:scale(1.1);
        }
          .price {
            background-color: #7668cb;
          }
        }

        p {
          text-align: center;
          width: 100%;
          color: #afafaf;
          margin-top: 0.5rem;
        }

        .tag {
          position: absolute;
          top: 0;
          right: 0;
        }

        .price {
          cursor: pointer;
          display: inline-block;
          padding: 0.4rem 0.7rem;
          transform: translateX(-50%);
          position: relative;
          left: 50%;
          border-radius: 4px;
          font-size: 1.2rem;
          font-weight: 700;
          color: #fff;
          align-items: center;
          img {
            position: relative;
            top: 0.185rem;
            height: 1.25rem;
            margin-right: 3px;
          }
        }

        .img {
          position: relative;
          width: 100%;
          -webkit-transition: 0.6s;
          transition: 0.6s;

          img {
            width: 100%;
            position: relative;
            z-index: 1;
          }
        }
      }
    }
  }
}
</style>
